<template>
    <div class="home">
        <div v-if="!isSHow">
            <h1>基于北斗卫星桥梁的全自动转体监测系统</h1>

            <h1>
                <span style="margin-right: 40px">已转：{{currentRotate}} 度</span>
                <span>剩余：{{surplusRotate}} 度</span>
            </h1>
            <HelloWorld mapId="ntrip"
                        :position="coordinateInfo"
                        :reset="reset"
                        :initAngle="initAngle"
                        class="region"/>

            <h3>云南省滇中新区机场北高速公路独家节特大桥上跨沪昆铁路桥梁工程</h3>
            <h1>中铁八局集团昆明铁路建设有限公司</h1>
            <button @click="isRotate = true">开始</button>
            <button @click="setShowEnd">停止</button>
        </div>

        <div v-if="isSHow">
            <h1>基于北斗卫星桥梁的全自动转体监测系统</h1>

            <h1 class="end">转体完毕！感谢各位领导、专家莅临指导！！</h1>

            <h3>云南省滇中新区机场北高速公路独家节特大桥上跨沪昆铁路桥梁工程</h3>
            <h1>中铁八局集团昆明铁路建设有限公司</h1>
        </div>
    </div>
</template>

<script>
    // @ is an alias to /src
    import HelloWorld from '@/components/HelloWorld.vue'
    import Bus from '../js/bus'

    export default {
        components: {
            HelloWorld
        },
        data() {
            return {
                initAngle: {
                    static: 20,
                    turn: 110
                },
                currentRotate: 0,
                surplusRotate: 0,
                isRotate: false,
                isSHow:false,
                coordinateInfo: [],
                reset: "",
            }
        },
        mounted: function () {
            Bus.$on("message", (data) => {
                if (this.isRotate) {
                    this.coordinateInfo = JSON.parse(JSON.stringify(data)).data;
                    this.currentRotate = (this.initAngle.turn - this.coordinateInfo[1]).toFixed(2);
                    this.surplusRotate = (this.coordinateInfo[1] - this.initAngle.static).toFixed(2);
                }
            })
        },
        methods: {
            setShowEnd(){
                this.isRotate = false;
                this.isSHow = true;
            }
        }
    }
</script>

<style scoped>
    .region {
        width: 100%;
        height: 400px;
    }

    button {
        color: red;
        border: none;
        padding: 25px 100px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-weight: 600;
        font-size: 32px;
        margin: 4px 2px;
        cursor: pointer;
    }

    .end{
        margin: 242px 0;
    }
</style>
